<template>
  <div class="400yw">
    <section class="nodata" v-if="!this.$store.getters.show">暂无数据</section>
    <section v-else>
      <Card title="业务介绍">
        <h4>一、400电话介绍</h4>
        <p>
          400电话是主被叫分摊付费业务电话，主叫方支付当地市话费，被叫接听方承担市话或长途费。
        </p>
        <p>
          企业400电话总机是一个中转虚拟号码不需要安装实体电话，只需绑定固话、手机或呼叫中心平台即可使用。
        </p>
        <h4>二、400电话作用</h4>
        <p>400电话可以提升企业的形象，增加客户信任，是企业信誉和实力的象征。</p>
        <p>
          号码终身不变，没有地域限制，实现企业对外宣传统一性、规范性，不会流失一个客户。平台功能强大，是企业营销必备利器。
        </p>
      </Card>
      <Card title="业务开通">
        <el-form inline size="small" :model="formA">
          <el-form-item label="客户名称">
            <el-input v-model="formA.valA"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary" @click="selectPer = true"
              >选取客户</el-button
            >
          </el-form-item>
          <el-form-item label="客户编码">
            <el-input v-model="formA.valB"></el-input>
          </el-form-item>
          <el-form-item label="客户所在省">
            <el-input v-model="formA.valC"></el-input>
          </el-form-item>
          <el-form-item label="客户所在市">
            <el-input v-model="formA.valD"></el-input>
          </el-form-item>
        </el-form>
      </Card>
      <Card title="业务介绍">
        <el-checkbox-group v-model="checkedVal" :max="valGroup.length">
          <el-checkbox v-for="item in valGroup" :label="item" :key="item">
            {{ item }}
          </el-checkbox>
        </el-checkbox-group>
        <section v-if="checkedVal.length !== 0" style="margin-top: 20px">
          <Card title="业务资费">
            <el-tag type="success">400语音免费资费</el-tag>
            &nbsp;
            <el-tag type="success">100元每月</el-tag>
          </Card>
          <Card title="产品属性">
            <el-form size="small" inline :model="formB">
              <el-form-item label="400号码">
                <el-input v-model="formB.valA"></el-input>
              </el-form-item>
              <el-form-item label="管理员邮箱">
                <el-input v-model="formB.valB"></el-input>
              </el-form-item>
              <el-form-item label="预占单流水号">
                <el-input v-model="formB.valC"></el-input>
              </el-form-item>
              <el-form-item label="主叫号码判别规则">
                <el-input v-model="formB.valD"></el-input>
              </el-form-item>
              <el-form-item label="被阻号码">
                <el-input v-model="formB.valE"></el-input>
              </el-form-item>
            </el-form>
          </Card>
        </section>
      </Card>
      <Card title="开通设置">
        <el-form size="small" inline :model="formC">
          <el-form-item label="生效日期">
            <el-select :value="1" size="small" v-model="formC.valA">
              <el-option label="当日生效" :value="1"> </el-option>
              <el-option label="下月生效" :value="2"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="账单生效时间">
            <el-select :value="1" size="small" v-model="formC.valB">
              <el-option label="当日生效" :value="1"> </el-option>
              <el-option label="下月生效" :value="2"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="支付模式">
            <el-select :value="1" size="small" v-model="formC.valC">
              <el-option label="有限公司一点受理，一点支付" :value="1">
              </el-option>
              <el-option label="有限公司一点受理，分省支付" :value="2">
              </el-option>
              <el-option label="主办省一点受理，一点支付" :value="3">
              </el-option>
              <el-option label="主办省一点受理，分省支付" :value="4">
              </el-option>
              <el-option label="本省受理，本省支付" :value="5"> </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </Card>
      <section style="textalign: center; margin: 10px">
        <el-button type="primary">提交订单</el-button>
        <el-button>取 消</el-button>
      </section>
    </section>

    <el-dialog
      close="dialog"
      title="选取客户"
      :visible.sync="selectPer"
      width="60%"
      top="10vh"
    >
      <el-scrollbar>
        <Person />
      </el-scrollbar>
    </el-dialog>
  </div>
</template>

<script>
import Card from '@/components/Card'
import Person from './components/Person'
export default {
  components: {
    Card,
    Person
  },

  data() {
    return {
      show: false,
      checkedVal: [],
      selectPer: false,
      valGroup: [
        '语音产品',
        '呼叫阻截',
        '密码接入',
        '语音次数限制',
        '挂机短信',
        '外呼',
        '云客服'
      ],
      formA: {
        valA: '',
        valB: '',
        valC: '',
        valD: ''
      },
      formB: {
        valA: '',
        valB: '',
        valC: '',
        valD: '',
        valE: ''
      },
      formC: {
        valA: 1,
        valB: 1,
        valC: 1
      }
    }
  }
}
</script>

<style lang="scss" scoped>
p {
  text-indent: 2em;
}
.nodata {
  font-size: 18px;
  height: 70vh;
  line-height: 70vh;
  text-align: center;
  color: #ccc;
}
</style>
